<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="UTF-8">
<link rel="shortcut icon" href="${ctp}/assets/img/youu.png"
	type="image/x-icon" />
<title>YOUU友游网用户登录页面</title>
<link rel="stylesheet" href="${ctp}/assets/css/loginStyle.css" />
<link rel="stylesheet" href="${ctp}/assets/css/code.css" />
<link href="${ctp}/assets/css/familyLato.css" rel="stylesheet" />
<link href="${ctp}/assets/css/MaterialIcons.css" rel='stylesheet' />
<script src="${ctp}/assets/vendor/jQuery/jquery-3.2.1.min.js"></script>
<!-- JQUERY -->
<script src="${ctp}/assets/vendor/layer/layer.js"></script>
<script src="${ctp}/assets/js/autoMail.1.0.min.js"></script>
<script src="${ctp}/assets/js/password.js"></script>
<%@ include file="/common/js.jsp"%>
<script type="text/javascript">
	$(document).ready(
			function() {
				$('#exampleInputEmail1').autoMail(
						{
							emails : [ 'qq.com', '163.com', '126.com',
									'sina.com', 'sohu.com', 'yahoo.cn',
									'gmail.com', 'hotmail.com', 'live.cn' ]
						});
			});

	$
			.extend(
					$.fn.validatebox.defaults.rules,
					{
						usernameYz : {// 验证用户名 
							validator : function(value) {
								return /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/i
										.test(value);
							},
							message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
						},

						emaill : {
							validator : function(value) {
								return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/i
										.test(value);
							},
							message : '邮箱不合法，格式XXX.@XXX(不允许使用汉字)'
						},
						equals : {
							validator : function(value, param) {
								return value == $(param[0]).val();
							},
							message : 'Field do not match.'
						},
					});
</script>

</head>

<body>
<body>
	<div class="cotn_principal">
		<div style="margin-left: 20px; float: left;">
			<h1>
				<a href="index.jsp" title="Rooky"> <img
					src="assets/img/youuIndexWhite.png" alt="Rooky" title="Rooky" /></a>

			</h1>
		</div>
		<div class="cont_centrar">
			<div class="cont_login">
				<div class="cont_info_log_sign_up">
					<div class="col_md_login">
						<div class="cont_ba_opcitiy">
							<h2>登录</h2>
							<p>We are YOUU 伐木雷！！</p>
							<button class="btn_login" onclick="cambiar_login()">用户登录</button>
							<br /> <br /> <span style="color: red;">${error}</span>

						</div>
					</div>
					<div class="col_md_sign_up">
						<div class="cont_ba_opcitiy">
							<h2>注册</h2>
							<p>友豪杰,游天下...</p>
							<button class="btn_sign_up" onclick="cambiar_sign_up()">注册用户</button>
						</div>
					</div>
				</div>
				<div class="cont_back_info">
					<div class="cont_img_back_grey">
						<img src="assets/img/po.jpg" alt="" />
					</div>
				</div>
				<div id="showLogin" class="cont_forms">
					<div class="cont_img_back_">
						<img src="assets/img/po.jpg" alt="" />
					</div>

					<form id="loginForm">
						<div id="showLogin1" class="cont_form_login">
							<a href="#" onclick="ocultar_login_sign_up()"><i
								class="material-icons">&#xE5C4;</i></a>
							<h2>登录</h2>
							<input id="loginAcctInput" name="loginacct" type="text"
								placeholder="用户名" class="easyui-validatebox"
								data-options="required:true" validType="length[3,16]" /> <input
								id="passwordInput" name="password" type="password"
								placeholder="密码" class="easyui-validatebox"
								data-options="required:true" validType="length[3,16]" /> <input
								id="city" name="city" type="hidden" /> <input id="lng"
								name="lng" type="hidden" /> <input id="lat" name="lat"
								type="hidden" />
							<button id="loginBtn" class="">确认登陆</button>
						</div>
					</form>
					<form id="regForm">
						<div class="cont_form_sign_up">
							<a href="#" onclick="ocultar_login_sign_up()"><i
								class="material-icons">&#xE5C4;</i></a>
							<h2>注册</h2>
							<input id="exampleInputEmail1" name="email" type="text"
								placeholder="邮箱" class="easyui-validatebox reg-easyui"
								data-options="required:true" validType="emaill" /> <input
								id="exampleInputLoginacct" name="loginacct" type="text"
								placeholder="用户名" class="easyui-validatebox reg-easyui"
								data-options="required:true" validType="usernameYz" /> <input
								id="exampleInputPassword" name="password" type="password"
								placeholder="密码" class="easyui-validatebox reg-easyui"
								data-options="required:true" validType="length[3,16]"
								onkeyup="pwStrength(this.value)" /> <input
								id="exampleInputpassAgain" name="passAgain" type="password"
								placeholder="确认密码" class="easyui-validatebox reg-easyui"
								required="required"
								validType="equals['#exampleInputPassword','length[6,16]']"
								invalidMessage="两次内容输入不一致" />
							<ul class="pass_set" style="margin-top: 5px;">
								<li id="strength_L">弱</li>
								<li id="strength_M">中</li>
								<li id="strength_H">强</li>
							</ul>
							<button id="submitBtn" style="margin-top: 5px;" class="">确认注册</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script src="assets/js/login.js"></script>
</body>
<script type="text/javascript">
	var city = localStorage.getItem("city");
	var lng = localStorage.getItem("lng");
	var lat = localStorage.getItem("lat");

	$("#city").attr("value", city);
	$("#lng").attr("value", lng);
	$("#lat").attr("value", lat);

	var index;//layer索引

	//用户注册
	$("#submitBtn").click(
			function() {

				var flag = $(".reg-easyui").nextAll().validatebox("isValid");
				if (!flag) {
					layer.msg("请按要求输入！");
					return false;
				}

				var param = $("#regForm").serialize();
				$.ajax({
					type : "post",
					url : "/youu-restapi/regist",
					data : param,
					beforeSend : function() {
						index = layer.load();
					},
					success : function(data) {
						if (data.code == 1) {
							$("#loginAcctInput").val(
									$("#exampleInputLoginacct").val());
							$("#regForm")[0].reset();
							layer.msg("注册成功，欢迎登陆");
							cambiar_login();
							layer.close(index);
						} else {
							layer.msg("注册失败，请稍后再试！");
							layer.close(index);
						}
					},
					error : function(e) {
						window.location.href = "toUserMain";
						layer.msg("注册失败，请稍后再试！")
						layer.close(index);
					},
					dataType : "json"
				});
				return false;
			});
	//用户登陆
	$("#loginBtn").click(function() {

		var flag = $(".easyui-validatebox").validatebox("isValid");
		if (!flag) {
			layer.msg("请按要求输入！");
			return false;
		}

		var param = new $("#loginForm").serialize();
		$.ajax({
			type : "post",
			url : "/youu-portal/login",
			data : param,
			beforeSend : function() {
				index = layer.load();
			},
			success : function(data) {

				if (data.code == 1) {
					if (data.LocationMsg != null) {
						layer.msg(data.LocationMsg);
					}
					window.location.href = "toUserMain";
				} else {
					layer.msg("登录失败，请确认您的账户密码")
				}
				layer.close(index)
			},
			error : function(e) {
				layer.msg("登录失败，请稍后再试")
				layer.close(index);
			},
			dataType : "json"

		});
		return false;
	});

	//邮箱唯一性验证
	$("#exampleInputEmail1").blur(function() {
		var email = $(this).val();
		$.getJSON("/youu-restapi/show/check?email=" + email, function(data) {
			console.log(data);
			if (data == false) {
				layer.msg("邮箱已被使用")
			} else {
				console.log(data)
			}
		});
	});
	//账户唯一性验证
	$("#exampleInputLoginacct").blur(
			function() {
				var loginacct = $(this).val();
				$.getJSON("/youu-restapi/show/check1?loginacct=" + loginacct,
						function(data) {
							console.log(data);
							if (data == false) {
								layer.msg("账户已被使用")
							} else {
								console.log(data)
							}
						});
			});
	$(".btn_sign_up").click(function() {
		$("#regForm")[0].reset();
	});
</script>
</body>
</html>
